<template>
  <view class="home flex column">
    <u-navbar :title-bold="true" title="煤矿信息告警" back-icon-color="#333" title-color="#000">
      <view slot="right" class="navbar-right">
        <image src="/static/image/screen.svg" @click="clickBtn" class="navbar-right--icon" />
      </view>
    </u-navbar>
    <!-- 搜索框 -->
    <view class="u-flex u-p-20">
      <picker-item class="county-input" v-model="searchData.customerName" :options="nameList"
        @change="handleSelectChange" />
      <u-search class="mine-input" placeholder="请输入姓名" v-model="searchData.name" shape="square" bg-color="#E5EAE8"
        height="80" :show-action="true" :animation="true" :input-style="{ marginLeft: '20rpx' }" :search-icon="searchSrc"
        placeholder-color="#999999" :action-style="{
          color: '#369164',
          fontSize: '14px',
          fontWeight: '400',
        }" @search="handleSearch" @custom="handleSearch" @change="handleSearch"></u-search>
    </view>

    <!-- 总数 -->
    <view class="all t-white">
      <text>总人数</text>
      <h4 class="u-font-40 u-p-l-10"> {{ '118' }}</h4>
    </view>

    <!-- 列表 -->
    <scroll-view :scroll-y="true" class="container item one" refresher-enabled="true" :refresher-triggered="triggered"
      :refresher-threshold="50" refresher-background="#F5F5F5" @refresherrefresh="onRefresh" @refresherpulling="onPulling"
      @refresherrestore="onRestore" @refresherabort="onAbort" @scrolltolower="onScrollToLower">
      <view class="container-body u-p-l-20 u-p-r-20">
        <!-- v-if="list && list.length" -->
        <template>
          <view class="body-cont u-flex">
            <u-image mode="aspectFit" width="116rpx" height="120rpx"
              src="/static/image/workbench/practitioner/archives-head.png"></u-image>
            <view class="body-cont-msg u-m-l-20">
              <view class="body-cont-msg-detail">
                <view class="u-flex body-cont-msg-detail-name">
                  <h4 class="u-line-1">{{ '姓名姓名姓名姓名姓名姓名' }}</h4>
                  <!-- :style="getColor()" -->
                  <text class="post" >{{ '在职' }}</text>
                </view>
                <view class="u-m-t-10 u-m-b-10">{{ '掘进工' }}</view>
                <view class="u-flex body-cont-msg-detail-tel">
                  <text class="u-p-r-26">{{ '13312345678' }}</text>
                  <u-image mode="aspectFit" width="40rpx" height="40rpx"
                    src="/static/image/workbench/practitioner/archives-tel.png"></u-image>
                </view>
              </view>
              <view>
                <!-- archives-not :未上传  archives-expired ：已过期-->
                <u-image mode="aspectFit" width="151rpx" height="152rpx"
                  :src="'/static/image/workbench/practitioner/'+ 'archives-expired'
                  +'.svg'"></u-image>
              </view>
            </view>

          </view>
          <view class="p-t-10 p-b-10">
            <u-loadmore :status="status" />
          </view>
        </template>
        <!-- <template v-if="showEmpty">
          <view class="c-empty p-absolute-center">
            <u-empty text="暂无数据"></u-empty>
          </view>
        </template> -->
      </view>
    </scroll-view>
  </view>
</template>

<script>
import PickerItem from "../../../../components/pickerItem/pickerItem.vue";

export default {
  name: 'index',
  components: { PickerItem },
  data () {
    return {
      searchData: {
        countyNo: "",
        customerName: "",
        pageSize: 20,
        pageNumber: 1,
      },
      nameList: [],// 搜索下拉的煤矿名称列表

      triggered: false, // 下拉刷新
      showEmpty: false,
      status: "loading",
      list: [],
    }
  },
  methods: {
    /**
     * 请求数据
     */
    async getData () {
      const res = await this.$post('/maillList/people/dataList', this.searchData)
      if (res && res.body.content) {
        this.list = this.searchData.pageNumber === 1 ? res.body.content : this.list.concat(res.body.content)
        // 到底了
        if (res.body.content.length < this.searchData.pageSize) {
          this.status = 'nomore'
        }
        // 数据空
        if (this.searchData.pageNumber === 1 && this.list && this.list.length === 0) {
          this.showEmpty = true
        } else {
          this.showEmpty = false
        }
      }
    },
    clickBtn () {
      const url = '/pages/alarm/screen'
      let show = false // 预警
      if (this.swiperCurrent) {
        // 报警
        show = true
      }
      const form = {
        ...this.form,
        show
      }
      uni.navigateTo({
        url: `${url}?form=${JSON.stringify(form)}&emitEvent=${this.emitEvent}`
      })
    },
    /**
     * 请求煤矿名称列表
     */
    getOptions () {
      this.nameList = getApp().globalData.coalList;
    },
    /**
     * select选中
     */
    handleSelectChange (val) {
      console.log('teh', val);
      // setTimeout(() => {
      //   this.getData();
      // }, 300);
    },
    /**
     * 搜索
     */
    handleSearch () {
      if (this.searchTimer) {
        clearTimeout(this.searchTimer)
      }
      this.searchTimer = setTimeout(() => {
        this.getData()
      }, 300)
    },
    /**
     * 上拉加载
     */
    onScrollToLower () {
      if (this.status === "loading") {
        this.searchData.pageNumber++;
        this.getData();
      }
    },
    /**
     * 职务状态判断
     */ 
    getColor(val){
      switch (val) {
        case value:// 在职
          return{
            color: '#5AB98F',
            background: 'rgba($color: #5AB98F, $alpha: 0.2)',
          }
        case value:// 已离职
          return{
            color: '#FF800A',
            background: 'rgba($color: #FF800A, $alpha: 0.2)',
          }
        default:
          break;
      }
    },
    onPulling (e) { },
    onRefresh () {
      if (this.Isfreshing) return;
      this.Isfreshing = true;
      if (!this.triggered) {
        // 保证刷新状态下，triggered为true
        this.triggered = true;
        this.init();
        this.getData();
        setTimeout(() => {
          this.triggered = false; // 触发onRestore，关闭刷新图标
          this.Isfreshing = false;
        }, 1200);
      }
    },
    onRestore () { },
    onAbort () { },
  },

  onLoad () {
    this.getOptions();
  },

}
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;

  .navbar-right {
    margin-right: 40rpx;

    &--icon {
      width: 40rpx;
      height: 40rpx;
    }
  }

  /deep/ .u-search {
    .u-content {
      border-radius: 0 10rpx 10rpx 0 !important;
    }
  }

  .search {
    padding: 0;

    /deep/ .u-search {
      .u-content {
        border-radius: 10rpx 0 0 10rpx !important;
        border-right: 2rpx solid #ddd;
      }
    }
  }

  .county-input {
    max-width: 300rpx;
  }

  // 总人数
  .all {
    width: calc(100% - 20rpx);
    height: 140rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('/static/image/workbench/practitioner/archives-bg.png') no-repeat 100% 100%;
  }

  .body-cont {
    box-shadow: 0 0 18rpx 0 rgba($color: #014833, $alpha: 0.2);
    border-radius: 12rpx;
    margin-top: 24rpx;
    padding: 28rpx 20rpx;

    &-msg {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &-detail {
        color: #666;
        &-name {
          h4{
            max-width: 270rpx;
            color: #333;
          }
          .post {
              border-radius: 4rpx;
              padding: 4rpx 20rpx;
              font-size: 24rpx;
              color: #5AB98F;
              background: rgba($color: #5AB98F, $alpha: 0.2);
              margin-left: 20rpx;
            }
        }
      }
    }

    
  }
}
</style>
